<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            placeholder="请输入用户名"
            class="input-with-select"
            v-model="queryInfo.query"
            clearable
            @clear="clearSearch"
          >
            <!-- v-model="input3" -->
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getUserList()"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button icon="el-icon-search" @click="dialogVisibleTrue()"
            >添加用户</el-button
          >
        </el-col>
      </el-row>
      <el-table
        :data="userList"
        border
        style="width: 100%"
        :header-cell-style="{
          color: '#fff',
          backgroundColor: '#99ccff',
        }"
      >
        <el-table-column type="index" width="180"> </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="职位"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <!-- {{scope.row}} -->
            <el-switch
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              inactive-color="#808080"
              @change="userStateChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <!-- 按钮 -->
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="editUser(scope.row.id)"
            ></el-button>
            <!-- <el-button type="success" icon="el-icon-check" circle></el-button> -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteUser(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 添加用户 -->
      <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        width="45%"
        closable
        @close="cleanSubmit"
      >
        <el-form
          :model="addForm"
          :rules="addFormRules"
          :ref="addFormRef"
          label-width="100px"
        >
          <el-form-item label="用户姓名" prop="username"
            ><el-input v-model="addForm.username"></el-input
          ></el-form-item>
          <el-form-item label="用户密码" prop="password"
            ><el-input v-model="addForm.password"></el-input
          ></el-form-item>
          <el-form-item label="邮箱" prop="email"
            ><el-input v-model="addForm.email"></el-input
          ></el-form-item>
          <el-form-item label="手机号" prop="mobile"
            ><el-input v-model="addForm.mobile"></el-input
          ></el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUserForm()">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改用户 -->
      <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="40%">
        <!-- :before-close="handleClose" -->
        <el-form>
          <el-form-item lable="用户id">
            用户id:
            <el-input v-model="userEdit.id" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item lable="邮箱">
            邮箱:
            <el-input v-model="userEdit.email"></el-input>
          </el-form-item>
          <el-form-item lable="手机号">
            手机号:
            <el-input v-model="userEdit.mobile"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="userEditSubmit(userEdit)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 编辑用户开关
      editDialogVisible: false,
      // 新增用户开关
      dialogVisible: false,
      userList: [],
      total: 0,
      // 页面数据
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 3,
      },
      // 用户信息
      addForm: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      // 编辑的用户信息
      userEdit: {
        id: "",
        email: "",
        mobile: "",
      },
      addFormRef: "",
      addFormRules: {
        username: [{ required: true, message: "姓名不能为空" }],
        password: [{ required: true, message: "密码不能为空" }],
        email: [{ required: true, message: "邮箱不能为空" }],
        mobile: [{ required: true, message: "手机号不能为空" }],
      },
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryInfo.pagesize = val;
      this.getUserList();
    },
    // 页码改变事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryInfo.pagenum = val;
      this.getUserList();
    },
    // 用户列表
    async getUserList() {
      await this.$http
        .get("http://127.0.0.1:8888/api/private/v1/users", {
          params: this.queryInfo,
        })
        .then((res) => {
          var userList = res.data.data.users;
          this.userList = userList;
          this.total = res.data.data.total;
        });
    },
    // 状态改变
    async userStateChange(val) {
      await this.$http
        .put(
          `http://127.0.0.1:8888/api/private/v1/users/${val.id}/state/${val.mg_state}`
        )
        .then((res) => {
          console.log("状态结果返回", res);
          if (res.data.meta.status != 200) {
            this.$message.error("更新状态失败");
          } else {
            this.$message.success("更新成功！");
            this.getUserList();
          }
        });
    },
    // 清空搜索
    clearSearch() {
      this.getUserList();
    },
    dialogVisibleTrue() {
      this.dialogVisible = true;
    },
    // 清空添加用户表单
    cleanSubmit() {
      this.$nextTick(() => {
        this.$refs.addFormRef.resetFields();
      });
      if (this.$refs.addFormRef !== undefined) {
        this.$refs.addFormRef.resetFields();
      }
    },
    // handleClose() {
    //   this.$refs.addFormRef.resetFields();
    // },
    // 添加用户
    addUserForm() {
      console.log("addForm表单提交:", this.addForm);
      this.dialogVisible = false;
      this.$http
        .post("http://127.0.0.1:8888/api/private/v1/users", this.addForm)
        .then((res) => {
          if (res.data.meta.status != 200) {
            this.$message.error("添加失败");
          } else {
            this.$message.error("添加成功");
          }
        });
    },
    // 修改用户
    async editUser(id) {
      this.editDialogVisible = true;
      console.log("id:", id);
      //   查询
      await this.$http
        .get("http://127.0.0.1:8888/api/private/v1/users/" + id)
        .then((res) => {
          if (res.data.meta.status != 200) {
            this.$message.error("添加失败");
          } else {
            console.log("res:", res);
            this.userEdit = res.data.data;
            console.log("userEdit:", this.userEdit);
          }
        });
    },
    async userEditSubmit(userEdit) {
      console.log("要提交的修改数据:", userEdit);
      //   修改
      await this.$http
        .put(
          "http://127.0.0.1:8888/api/private/v1/users/" + userEdit.id,
          userEdit
        )
        .then((res) => {
          if (res.data.meta.status != 200) {
            this.$message.error("更新失败");
          } else {
            this.$message.success("更新成功");
            this.editDialogVisible = false;
            this.getUserList();
          }
        });
    },
    // 删除用户
    deleteUser(id) {
      this.$http
        .delete("http://127.0.0.1:8888/api/private/v1/users/" + id)
        .then((res) => {
          console.log(res)
           this.getUserList();
        });
    },
  },
};
</script>

<style lang="less" scoped>
.el-col {
  display: flex;
  align-items: center;
  height: 100px;
}
/deep/ .el-table {
  line-height: 60px;
}
.block {
  margin-top: 40px;
  height: 80px;
}
/deep/.el-dialog__header {
  height: 80px;
}
</style>
